import { Routes, Route, Navigate } from 'react-router-dom'
import BasicLayout from '@/layouts/BasicLayout'
import HomePage from '@/pages/home/page'
import AboutPage from '@/pages/about/page'
import ProfilePage from '@/pages/profile/page'
import LoginPage from '@/pages/login/page'
import ProtectedRoute from './ProtectedRoute'

export function AppRoutes() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route path="/" element={<BasicLayout />}>
        <Route index element={<HomePage />} />
        <Route element={<ProtectedRoute />}>
          <Route path="about" element={<AboutPage />} />
        </Route>
        <Route element={<ProtectedRoute roles={['admin']} />}>
          <Route path="profile" element={<ProfilePage />} />
        </Route>
      </Route>
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  )
} 